import React from 'react';
import './TranslationProgress.css';

const TranslationProgress = ({ isVisible, progress, total, currentText, onCancel }) => {
  if (!isVisible) return null;

  const percentage = total > 0 ? Math.round((progress / total) * 100) : 0;

  return (
    <div className="translation-progress-overlay">
      <div className="translation-progress-modal">
        <div className="progress-header">
          <h3>🤖 AI翻译进行中...</h3>
          <button className="cancel-btn" onClick={onCancel}>取消</button>
        </div>
        
        <div className="progress-content">
          <div className="progress-stats">
            <span>进度: {progress} / {total}</span>
            <span>{percentage}%</span>
          </div>
          
          <div className="progress-bar">
            <div 
              className="progress-fill" 
              style={{ width: `${percentage}%` }}
            />
          </div>
          
          <div className="current-translation">
            <div className="current-label">
              {currentText?.startsWith('已从缓存加载') ? '状态：' : '正在翻译：'}
            </div>
            <div className="current-text">{currentText || '准备中...'}</div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default TranslationProgress;